<canvas #canvas>Your browser does not support the canvas element.</canvas>
<ion-content>
  <ion-grid>
    <ion-row class="ion-align-items-center">
      <ion-col>
        <!-- kiosk mode  -->
        <ng-container *ngIf="isKiosk; else notKiosk">
          <ion-card>
            <ion-row class="ion-align-items-center">
              <ion-col responsiveCol sizeXs="12" class="ion-text-center">
                <div class="inline mb-12">
                  <ion-icon
                    name="checkmark-circle-outline"
                    color="success"
                  ></ion-icon>
                  <h1>Setup Complete!</h1>
                </div>
                <ion-button
                  shape="round"
                  class="login-button mb-12"
                  (click)="exitKiosk()"
                >
                  Continue to Login
                  <ion-icon name="log-in-outline" slot="end"></ion-icon>
                </ion-button>
              </ion-col>
            </ion-row>
          </ion-card>
        </ng-container>
        <!-- not kiosk -->
        <ng-template #notKiosk>
          <ion-card *ngIf="lanAddress">
            <ion-row class="ion-align-items-center">
              <ion-col responsiveCol sizeXs="12" class="ion-text-center">
                <div class="mb-12">
                  <div class="inline-container setup">
                    <ion-icon
                      name="checkmark-circle-outline"
                      color="success"
                    ></ion-icon>
                    <h1>Setup Complete!</h1>
                  </div>
                  <h3 *ngIf="setupType === 'restore'">
                    You can now safely unplug your backup drive
                  </h3>
                  <h3 *ngIf="setupType === 'transfer'">
                    You can now safely unplug your old StartOS data drive
                  </h3>
                </div>
                <div class="card-container">
                  <ion-card id="information" (click)="download()">
                    <ion-card-content>
                      <ion-card-title>Download address info</ion-card-title>
                      <p>
                        start.local was for setup purposes only. It will no
                        longer work.
                      </p>
                    </ion-card-content>
                    <ion-footer>
                      <div class="inline-container">
                        <p class="action-text">Download</p>
                        <ion-icon slot="end" name="download-outline"></ion-icon>
                      </div>
                    </ion-footer>
                  </ion-card>
                  <ion-card
                    id="launch"
                    [disabled]="disableLogin"
                    href="{{ lanAddress }}"
                    target="_blank"
                  >
                    <ion-card-content>
                      <ion-card-title>Trust your Root CA</ion-card-title>
                      <p>
                        In the new tab, follow instructions to trust your
                        server's Root CA and log in.
                      </p>
                    </ion-card-content>
                    <ion-footer>
                      <div class="container">
                        <div class="inline-container">
                          <p class="action-text">Open</p>
                          <ion-icon slot="end" name="open-outline"></ion-icon>
                        </div>
                      </div>
                    </ion-footer>
                  </ion-card>
                </div>
              </ion-col>
            </ion-row>
            <!-- download elem -->
            <download-doc
              hidden
              id="downloadable"
              [lanAddress]="lanAddress"
            ></download-doc>
          </ion-card>
        </ng-template>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
